<template lang="html">
	<div class="detail">
		<search ></search>
		<div class="top">
			<div class="avatar">
				<img :src="info.headimgurl" alt="">
			</div>
			<div class="right">
				<div class="username">
					{{info.wechatName}}
				</div>
					<div class="bottom">
						<div class="date">
							{{info.date}}
						</div>
						<div class="line">
							|
						</div>
						<div class="answerNum">
							{{info.answerNum}}个回答
						</div>
					</div>
				</div>
				<div class="deletbtn" v-if="htpowresult">
					<mt-button size="normal" @click="deletProblem()"   type="danger">删除提问</mt-button>
					<mt-button size="normal" @click="joinBlacklist()" style="background-color:black" type="danger">加入黑名单</mt-button>
				</div>
				
			</div>
			<div class="question">
				<div class="title">
					{{info.title}}
				</div>
				<div class="titleContent">
					<span class="">&nbsp;&nbsp;&nbsp;</span>
					{{info.titleContent}}
				</div>
			</div>
			<div class="space">

			</div>
			<div class="anwser" v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<div class="title">
					全部回复
				</div>
				<div v-if="answerList.length!=0" class="list" v-for="(l, index) in answerList">
					<div class="top">
						<div class="avatar">
							<img :src="l.headimgurl" alt="">
						</div>
						<div class="right">
							<div class="username">
								{{l.wechatName}}
							</div>
							<div class="date">
								{{l.date}}
							</div>
						</div>
					</div>
					<div class="content">
						{{l.content}}
					</div>
				</div>
				<div class="noanswer" v-if="answerList.length==0">
					暂无回复
				</div>
				<div class="center" style="border-bottom: 1px solid #fff;height:30px" v-show="isshow">
					<div class="mint-cell-value jztitle">加载中</div>
					<div class="mint-cell-value">
						<span><mt-spinner  type="fading-circle"></mt-spinner></span>
					</div>
				</div>
				<div v-show="iswushow" class="center  wutitle" style="border-bottom: 1px solid #fff;height:30px ">
					我们是有底线的
				</div>
			</div>
			<!-- <div class="bg" v-show="isShowBg" @touchstart="bgClick()"> -->
			<!-- <div class="bg" v-show="isShowBg" @touchstart="bgClick()"></div> -->
			<div class="comment" v-if="htpowresult">
				<input
				id="id-input-comment"
				type="tpext"
				name=""
				placeholder="说说你的看法..."
				v-model="comment"
				@focus="inputFocus()"
				@blur="inputBlur()">
				<div class="submit" @click="submitClick()" v-show="showSubmit">
					提 交
				</div>
			</div>
		</div>

	</div>
</template>

<script>
console.log(document.documentElement.clientHeight)
import {questionDetail,answerDetail,subAnswer,deletProblem,joinBlacklist} from "@/components/common/API/msgboard";
import search from '@/components/Index/search'
import {config} from "@/components/common/API/config";
export default {
	data() {
		return {
			// 是否显示提交按钮
			showSubmit: false,
			// 是否显示背景
			isShowBg: false,
			interval: '',
			query: '',
			info: {
				headimgurl: '@/components/common/images/avatar1.jpg',
				wechatName: '小猪佩奇',
				date: '2018-05-02',
				answerNum: '15',
				title: '小升初如何学好英语?',
				titleContent: `当下，江门家长的教育观念及对幼稚教育的需求不断升级，因此我们有这么一条使命，
				把广外这个广州幼稚教育品牌带到江门，实现传承与创新，
				让江门学生在家门口就可以上广州名校。`,
			},
			answerList: [
					// {
					// 	headimgurl: '@/components/common/images/avatar2.jpg',
					// 	wechatName: '小猪佩奇',
					// 	date: '2018-05-02',
					// 	content: '第四节中国国际大数据产业博览会在贵州贵阳正式召开',
					// },
					// {
					// 	headimgurl: '@/components/common/images/avatar3.jpg',
					// 	wechatName: '阿吉豆',
					// 	date: '2018-05-02',
					// 	content: '记者从四川省人社厅官网获悉，为加强我省专业技术人员继续教育基地建设',
					// },
			],
			comment: '',
			iphonex: false,
			//分页查询条件
			pageNum: 1,
			pageLimit: 6,
			answerNum: 99,
			loading: false,
			isshow: false,
			iswushow: false,
			htpowresult:false,//是否显示评论功能结果由后台给出   1显示 0不显示
		}
	},
	created() {
		this.id = this.$route.query.id
		console.log(this.id)
		this.init()
		this.isIPhoneX()
		this.log('默认高度', window.innerHeight)
	},
	methods: {
		init() {
			// 请求问题详情
			questionDetail({id:this.id}).then((res)=>{
				this.info=res.questionDetail
				if(!this.info.answerNum){
					this.info.answerNum=0
				}
			})
			this.answerDetail()
			console.log('htpowresult',htpowresult)
			if(htpowresult==1){
				this.htpowresult=true
			}
		},
		// 判断是否未 iphoneX，由于ipx设计原因键盘高度高于正常手机，会无法显示底部的input，
		isIPhoneX() {
			var u = navigator.userAgent;
			this.userAgentInfo = u
			this.log('设备', u)
			var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			this.iphonex = screen.height == 812 && screen.width == 375
		},

		// 文字聚焦 修改 input 高度
		inputFocus() {
			this.isShowBg = true
			this.showSubmit = true
		   	setTimeout(function() {
				document.body.scrollTop =document.body.clientHeight;
			}, 300)
			this.log('显示后的高度', window.innerHeight)
		},

		// input 失去焦点 还原高度
		inputBlur() {
			this.isShowBg = false
			this.showSubmit = false
		},
		bgClick() {
			$('#id-input-comment').blur()
		},
		// 发送请求
		submitClick() {
			// 评论内容
			console.log(123123)
			if($.trim(this.comment)==''){
				this.$toast({
					message: '回复不能为空',
				});
				return;
			}
			let comment = this.comment
			subAnswer({comment:comment,id:this.id}).then((res)=>{
				if(res.code==1){
					this.$messagebox.alert('身份过期重新登入', '提示').then(()=>{
						 window.location.href=config.service.index
					});
					// window.location.href=config.service.index
					return;
				}
				this.$toast({
					message: '提交成功',
					iconClass: 'mint-toast-icon mintui mintui-success'
				});
				this.info.answerNum++
				 this.comment=''
				if((this.answerNum - (this.pageNum * this.pageLimit))<1){// 当用户出去显示所有数据时提交
					this.answerDetail(1)//提交回复后显示数据
					this.loading=false
					this.iswushow=false
				}
			})
			// ajax()请求
			// 清空comment
			// this.comment = ''
			// 重新初始化页面
			// this.init()
		},
		//查询回复
		answerDetail(ifnum=0){
			this.loading=true
			let data = {
					id:this.id,
					pageNum: this.pageNum,
					pageLimit: this.pageLimit,
				}
			answerDetail(data).then((res)=>{
				console.log(res)
				if(ifnum==1){ //提交回复后显示数据
					res.answerDetail=[res.answerDetail.pop()]
				}
				this.answerList=this.answerList.concat(res.answerDetail)//连接数组
				this.answerNum=res.answerNum//获取回复总数
				this.isshow = false
				if(this.answerNum - (this.pageNum * this.pageLimit)>0){
					this.pageNum++
				}
				this.loading=false
			})
		},
		//滚动查询
		loadMore(){
			let total = (this.answerNum - (this.pageNum * this.pageLimit))>0
			if (!total) {
				this.iswushow = true
				this.isshow = false
				this.loading=true
			} else {
				this.loading=true
				this.isshow = true
				this.answerDetail()
			}
		},
		//删除问题
		deletProblem(){
			this.$messagebox.confirm('确定删除此问题?').then(action => {
				deletProblem({id:this.id}).then((res)=>{
					if(res.code==0){
						this.$toast({
						message: '删除成功',
						iconClass: 'mint-toast-icon mintui mintui-success'
					});
					 window.location.href=config.service.index
					}
				})
            });
		},
		//用户加入黑名单
		joinBlacklist(){
			this.$messagebox.confirm('确定将提问用户加入黑名单?加入后用户将无法提问').then(action => {
				joinBlacklist({id:this.id}).then((res)=>{
					if(res.code==0){
						this.$toast({
						message: '加入成功',
						iconClass: 'mint-toast-icon mintui mintui-success'
					});
					//  window.location.href=config.service.index
					}else if(res.code==3){
						this.$messagebox.alert('不能将自己加入黑名单哟', '提示');
					}
				})
            });
		}
	},
	watch: {
		// '$route': function() {
		// 	this.log('11111111')
		// }
	},
	components: {
		search,
	},
}

</script>

<style lang="scss" scoped>
@import '../common/base';

.deletbtn{
	position: relative;
    right: -0.5rem;
    top: 0.6rem;
}
//弹框样式  //修改入源代码
.mint-msgbox-title{
    text-align: center;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 0.6rem;
    font-weight: 700;
    color: #333;
}
.mint-msgbox-message {
    color: #999;
    margin: 0;
    text-align: center;
    line-height: 0.48rem;
    font-size: 0.5rem;
}
.mint-msgbox-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    line-height: 0.533333rem;
}
.mint-msgbox-btn {
    line-height: 0.466667rem;
    display: block;
    background-color: #fff;
    -webkit-box-flex: 1;
    font-size: 0.5rem;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    border: 0;
}

//弹框样式修改结束


//滚动下拉
.jztitle{
	float:left;
	margin-right:10px;
	font-size: 40px;
	color: #888;
}
.wutitle{
	color: #888;
	font-size: 30px;
}
.center{
		display: flex;
	 justify-content:center;
	 border-bottom: 1px solid #fff;
}
.mint-cell-value {
    color: #888;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
//滚动下拉
	.detail {
		// margin-bottom: 100px;
		margin-bottom: 200px;
		// background: red;
		.top {
			height: 150px;
			display: flex;
			border-bottom: 1px solid #ccc;
			.avatar {
				height: 60px;
				width: 60px;
				margin-left: 30px;
				margin-right: 15px;
				position: relative;
				@include vetically;
				img {
					width: 100%;
					height: 100%;
					border-radius: 50px;
				}
			}
			.right {
				color: #666;
				margin-top: 30px;
				.username {
					font-size: 34px;
				}
				.bottom {
					margin-top: 25px;
					display: flex;
					justify-content: space-between;
					width: 280px;
				}
			}
		}
		.question {
			width: 95%;
			margin: 20px auto 20px auto;
			min-height: 210px;
			.title {
				font-size: 34px;
				color: #1c1c1c;
				margin-bottom: 30px;
			}
			.desc {
				font-size: 25px;
				color: #989898;
			}
		}
		.space {
			height: 10px;
			background: #f0f0f0;
		}
		.anwser {
			.title {
				margin-top: 20px;
				margin-left: 5px;
				font-size: 33px;
				color: #666;
			}
			.list {
				min-height: 228px;
				color: #666;
				border-bottom: 1px solid #f0f0f0;
				.top {
					height: 110px;
					border: 0;
					.right {
						display: flex;
						justify-content: space-between;
						width: 80%;
						margin-top: 35px;
						.username {
							font-size: 34px;
						}
						.date {
							font-size: 22px;
							color: #999;
						}
					}
				}
				.content {
					margin-left: 80px;
					width: 84%;
					font-size: 26px;
					color: #6A6A6A;
				}
			}
			.noanswer{
				text-align: center;
				font-size: 50px;
			}
		}
		.bg {
			position: fixed;
			top: 0px;
			height: 100vh;
			width: 100vw;
			z-index: 100;
		}
		.comment {
			position: fixed;
			height: 90px;
			width: 100%;
			bottom: 0px;
			margin-bottom: 10px;
			// background: red;
			input {
				// position: absolute;
				position: relative;
				height: 100%;
				width: 100%;
				outline: 0;
				border: 0;
				background: #eee;
				padding-left: 20px;
				font-size: 34px;
				line-height: 40px;
				border-radius:  0;
				height: 68px;
				width: 90%;
				left: 2.5%;
				// background: blue;
			}
			.submit {
				height: 38px;
				width: 76px;
				background: #1287BE;
				color: #fff;
				position: absolute;
				line-height: 38px;
				text-align: center;
				top: 50%;
				// z-index: 10000;
				transform: translateY(-50%);
				right: 50px;
				user-select: none;
			}

		}
	}
</style>
